<template>
  <div class="categoryPage">
    <!-- taber 商品搜索  跳转 搜索页 -->
    <van-nav-bar class="category_nav">
      <template #left>
        <!-- 头部标签 -->
        <router-link to="/search/list">
          <van-button
            class="search-btn"
            type="info"
            size="small"
            round
            icon="search"
          >
            搜索商品名称
          </van-button>
        </router-link>
      </template>
    </van-nav-bar>
    <!-- 侧边导航栏 -->
    <van-tree-select
      class="category_seleted"
      v-model:main-active-index="activeIndex"
      height="240vw"
      :items="items"
    >
      <template #content>
        <div class="category-list-box">
          <!-- 推荐 -->
          <div class="category_product" v-if="activeIndex === 0" key="0">
            <router-link :to="'/cartCategroy/0'">
              <van-image
                class="category_img"
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e46608ddb8debc8c9c3dfef10e0486e.png?w=734&h=220&bg=7F0000"
                alt=""
              />
              <!-- 组件 -->
              <ProductList :prto_id="0" :activeIndex="0" prto_img="" />
              <van-grid :column-num="3">
                <van-grid-item
                  v-for="item in recommnedSearchs"
                  :key="item.key"
                  :text="item.key"
                >
                  <template #icon>
                    <van-image :src="item.img_url" />
                  </template>
                </van-grid-item>
              </van-grid>
            </router-link>
          </div>

          <!-- 主体 -->
          <div>
            <!-- xiaomi -->
            <div class="category_product" v-if="activeIndex === 1" key="1">
              <router-link :to="'/cartCategroy/1'">
                <van-image
                  class="category_img"
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e46608ddb8debc8c9c3dfef10e0486e.png?w=734&h=220&bg=7F0000"
                  alt=""
                />
                <ProductList :prto_id="1" />
              </router-link>
            </div>
            <!-- RedMi -->
            <div class="category_product" v-if="activeIndex === 2" key="2">
              <router-link :to="'/cartCategroy/2'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/881986cc3292f2537287d97b63df6187.png?w=734&h=220&bg=7F0000"
                />
                <ProductList :prto_id="2" />
              </router-link>
            </div>
            <!-- 电脑平板 -->
            <div class="category_product" v-if="activeIndex === 3" key="3">
              <router-link :to="'/cartCategroy/3'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0ef40c401779d31b218fe2c35d155f6.png?w=734&h=220&bg=7F0000"
                />
                <ProductList :prto_id="3" />
              </router-link>
            </div>
            <!-- 智能穿戴 -->
            <div class="category_product" v-if="activeIndex === 4" key="4">
              <router-link :to="'/cartCategroy/4'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45347c0635c3d40c3174cda1230af477.png?w=734&h=220&bg=7F0000"
                />
                <ProductList :prto_id="4" />
              </router-link>
            </div>
            <!-- 电视 -->
            <div class="category_product" v-if="activeIndex === 5" key="5">
              <router-link :to="'/cartCategroy/14'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c7176304408eafb53d8889a9c61d11e7.png?w=734&h=220&bg=7F0000"
                />
                <ProductList :prto_id="14" />
              </router-link>
            </div>
            <!-- 大家电 -->
            <div class="category_product" v-if="activeIndex === 6" key="6">
              <router-link :to="'/cartCategroy/20'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5a637fa694242b8ec5f4b20affa9580.png?w=734&h=220&bg=3E4148"
                />
                <ProductList :prto_id="20" />
              </router-link>
            </div>
            <!-- 小家电 -->
            <div class="category_product" v-if="activeIndex === 7" key="7">
              <router-link :to="'/cartCategroy/7'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b81bdaaaa70ec9c98d0cbab16c8fd23f.png?w=734&h=220&bg=7F0000"
                />
                <ProductList :prto_id="7" />
              </router-link>
            </div>
            <!-- 智能家居 -->
            <div class="category_product" v-if="activeIndex === 8" key="8">
              <router-link :to="'/cartCategroy/8'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/423c4398ff5ad224cfbf5684d437e97e.png?w=734&h=220&bg=0"
                />
                <ProductList :prto_id="8" />
              </router-link>
            </div>
            <!-- 出行 -->
            <div class="category_product" v-if="activeIndex === 9" key="9">
              <router-link :to="'/cartCategroy/9'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f6e5a3c73b0143de22157f6054daa80d.png?w=734&h=220&bg=0"
                />
                <ProductList :prto_id="9" />
              </router-link>
            </div>
            <!-- 日用百货 -->
            <div class="category_product" v-if="activeIndex == 10" key="10">
              <router-link :to="'/cartCategroy/10'">
                <van-image
                  src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4cbdcef305deac28c1f71fd7ccff3ba1.png?w=734&h=220&bg=0"
                />
                <ProductList :prto_id="10" />
              </router-link>
            </div>
          </div>
          
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import { ref } from "vue";
import ProductList from "./components/ProductList";
export default {
  components: {
    ProductList,
  },
  setup() {
    const activeIndex = ref(0);
    // text  侧边 品牌名
    const items = [
      { text: "推荐" },
      { text: "小米/红米" },
      { text: "电视" },
      { text: "电脑平板" },
      { text: "路由" },
      { text: "智能穿戴" },
      { text: "小家电" },
      { text: "大家电" },
      { text: "智能家居" },
      { text: "户外出行" },
      { text: "日用百货" },
    ];
    //推荐栏 下方推荐列表
    const recommnedSearchs = [
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/960d47c60c0a0f83cbca500333f84aa3.png?thumb=1&w=120&h=120",
        key: "Redmi 手表2",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/348b2a49f49540c83819ff9dd224ca20.png?thumb=1&w=120&h=120",
        key: "水壶/养生壶",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dd9d058fe0f132b0f09885c0ddc20ad1.png?thumb=1&w=120&h=120",
        key: "剃须刀",
      },
      {
        img_url:
          "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8520387c56ef4e88c89e1aeb73cb31bb.png?thumb=1&w=120&h=120",
        key: "电池",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4383a79a1646760515fd312d6d2cbeed.png?thumb=1&w=120&h=120",
        key: "车具配件",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1fccb7e66891e84f74618c3557dd2991.png?thumb=1&w=120&h=120",
        key: "Color 2",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d133e7e994524d08d28d9f5026b5e6e.png?thumb=1&w=120&h=120",
        key: "口腔护理",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/901c89ad5e92c6408980decd7a79b739.png?thumb=1&w=120&h=120",
        key: "无线充",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2768f0ffc7d8dd66e5c58c9062898338.png?thumb=1&w=120&h=120",
        key: "小米10S",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/62f1c734b85a7a342aa3e192a5978a4f.png?thumb=1&w=120&h=120",
        key: "手环配件",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c08ac3d256bfac74a9f5dc11ced2b30e.png?thumb=1&w=120&h=120",
        key: "限定卫衣",
      },
      {
        img_url:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/855164f013ebca13f0b4f00c1c026af2.png?thumb=1&w=120&h=120",
        key: "保温杯",
      },
    ];
    return {
      items,
      activeIndex,
      recommnedSearchs,
    };
  },
};
</script>

<style lang="scss" scoped>
.categoryPage {
  .category_nav {
    position: fixed;
    top: 0;
    z-index: 99;
    margin-top: 2vw;
    .search-btn {
      display: flex;
      justify-content: flex-start;
      width: 90vw;
      height: 8vw;
      background-color: #f5f5f5;
      border-radius: 4vw;
      line-height: 8vw;
      text-align: center;
      border: none;
      color: gray;
    }
  }
  .category_seleted {
    position: fixed;
    left: 0;
    top: 15vw;
    right: 20vw;
    .category-list-box {
      .category_product {
        // height: 1000px;
        .category_img {
          padding-left: 10px;
        }
      }
    }
  }
  // vant tree-select 样式
  .van-tree-select {
    width: 95%;
    // .van-image__img{
    //   padding-left: 20px;
    // }
  }
  .van-grid-item__text {
    font-size: 12px;
  }
  //  .van-tree-select .van-image__img {
  //   padding-left: 15px;
  // }
  .van-badge__wrapper {
    .van-image {
      width: 36px;
      height: 36px;
    }
  }
}
</style>